<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>素材库</title>
    <link rel="stylesheet" href="./css/element_ui.min.css">
    <style>
        *{ margin: 0; padding: 0; box-sizing: border-box;}
		.upload_drawer{ background-color:#000;}
        .upoload_content .clearFix:after{ content:''; display:block; clear: both;}
        .upoload_content #loading{ display: none; width: 100%; height: 100%; flex-direction: column; align-items: center; justify-content: center; color: #999; font-size: 16px;}
        .upoload_content #loading>img{ width: 100px; height: 100px;}
        .upoload_content #loading[v-cloak]{ display: flex;}
        .upoload_content ::-webkit-scrollbar{ width:2px; background-color:rgba(0,0,0,.1);}
        .upoload_content ::-webkit-scrollbar-thumb{ background-color:#282828;}
        .upoload_content ::-webkit-scrollbar-track{ background-color:#323232;}

        .upoload_content .el-image{ width:100%;}
        .upoload_content .image-slot{ width: 100%; padding-top: 100%; position: relative; background-color: #DDD; border-radius: 5px;}
        .upoload_content .image-slot i{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 30px; color:#adadad;}

        .upoload_content{ width:70%; position:fixed; top:0; right:0; bottom:0; z-index:7; background:#000; padding: 15px 20px; color:#E4E4E4; font-size:14px;}
        .upoload_content .box_border{ background-color: #282828; border: 2px solid #1C1C1C; box-shadow: 0 0 1px 1px #2D2D2D inset; border-radius: 5px;}
        .upoload_content .box_border .title{ border-bottom: 2px solid #323232;}
        .upoload_content .icon{ transition: color .5s; cursor: pointer;}
        .upoload_content .icon:hover{ color: #409EFF;}

        .upoload_content .left_cont{ width:180px; position: absolute;}
        .upoload_content .left_cont .el-button{ width:100%; line-height: 30px; margin-bottom: 10px; padding: 6px 20px;}
        .upoload_content .left_cont .el-button i{ font-size: 28px; margin-right: 5px; vertical-align: top;}
        .upoload_content .left_box{ min-height: 240px; margin-bottom: 10px;}
        .upoload_content .left_box .title{ padding: 0 10px; line-height: 35px;}
        .upoload_content .left_box .title .icon{ float: right; margin-top: 12px; font-weight: bold;}
        .upoload_content .left_box .cont{ padding: 5px 0; height:200px; overflow-y:auto;}
        .upoload_content .left_box .cont .li{ padding: 0 12px; line-height: 30px; font-size: 12px; cursor: pointer;}
        .upoload_content .left_box .cont .li .icon{ float: right; margin-top: 11px;}
        .upoload_content .left_box .cont .li:hover{ background-color: #1C1C1C;}
        .upoload_content .left_box .cont .li.active span{ color: #409EFF;}

        .upoload_content .right_cont{ padding-left: 200px;}
        .upoload_content .right_cont .nav{ height: 25px; margin-bottom: 10px; overflow: hidden;}
        .upoload_content .nav .name{ line-height: 1; border-left: 2px solid #D1D1D1; padding-left: 9px; margin-top: 8px;}
        .upoload_content .right_cont .content{ min-height: 600px; border-radius: 10px;}
        .upoload_content .content .menu{ padding: 5px 0; line-height: 25px; overflow: hidden;}
        .upoload_content .content .menu .bar{ float: left; font-size: 13px; padding: 0 20px; border-right: 2px solid #323232;}
        .upoload_content .content .menu .bar:last-child{ border-right: 0;}
        .upoload_content .content .menu .bar .disabled{ opacity: .5; color: #E4E4E4; cursor: no-drop;}
        .upoload_content .content .cont{ display: flex; padding:12px 15px; flex-wrap: wrap;}
        .upoload_content .content .cont .box{ display: flex; width:15%; padding: 1.6%; margin: 0 0.8% 1.6%; border: 2px solid transparent; border-radius: 5px; text-align: center; flex-direction: column; justify-content: flex-end; cursor: pointer;}
        .upoload_content .content .cont .box .ellipsis{ font-size: 12px; margin-top: 5px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}

        .upoload_content .content .cont .box:hover{ border-color: #3b78b4; background-color: rgba(255,255,255,.2);}
        .upoload_content .content .cont .box.active{ border-color: #409EFF; background-color: rgba(255,255,255,.2);}
        .upoload_content .content .cont .tip_noData{ width:300px; padding-top: 300px; text-align: center; margin: 0 auto; background: url('images/data_null.png') center 0 no-repeat; background-size: contain; opacity: .5;}

        .upoload_content .content .control_cont{ padding: 40px 0 0;}
        .upoload_content .content .control_cont .el-form{ width:75%; margin: 0 auto;}
        .upoload_content .content .control_cont .el-form-item__label{ color: inherit;}
        .upoload_content .content .control_cont .inp{ width: 200px;}

        .upoload_content .content .move_control{ text-align: center;}
        .upoload_content .content .move_control .el-transfer{ margin-top: 30px;}
        .upoload_content .content .move_control .el-transfer .el-transfer-panel{ text-align: left; background: #333; border-color: #333;}
        .move_control .el-transfer-panel .el-transfer-panel__header .el-checkbox .el-checkbox__label,
        .move_control .el-transfer .el-transfer-panel .el-checkbox{ color:#D1D1D1;}
        .move_control .el-transfer-panel .el-transfer-panel__header{ background: #444; border-color:#2D2D2D;}
        .move_control .el-transfer-panel .el-transfer-panel__footer{ background: transparent; border: 0;}
        .move_control .el-transfer-panel:last-child .el-transfer-panel__list{ padding-bottom: 40px;}
        .move_control .el-input__inner{ background: #393939; color:#D1D1D1; border-color:#2D2D2D;}

        .upload_pro{ height: 20px; line-height: 20px; position: relative;}
        .upload_pro p{ width:100%; text-align: center; color:#E4E4E4; position: absolute; top: 0; left: 0; z-index: 4;}
        .upload_pro .el-progress-bar__outer{ background-color: #4f5054;}
        .upload_pro .el-progress__text{ color:#E4E4E4; font-size: 16px !important;}
	    .upload_pro .el-progress-bar{ padding-right:65px; margin-right:-70px;}
    </style>
</head>
<body style="background: #eee;">
    <div class="upoload_content" id="upoload_content">
        <div id="loading" v-cloak>
            <img src="images/loading.gif" alt="">
            <p>加载中...</p>
        </div>
        <!-- 左侧菜单 -->
        <div class="left_cont clearFix">
            <el-button type="primary" @click="content_state = 1, zIndex = -1;"><i class="el-icon-upload el-icon--right"></i>文件上传</el-button>
            <div class="left_box box_border" v-for="(item, index) in DTotal">
                <div class="title">
                    {{index == 'image' ? '图片管理' : index == 'video' ? '视频管理' : '其它文件'}}
                    <b class="icon el-icon-plus" @click="addClassify(index)"></b>
                </div>
                <div class="cont">
                    <div class="li" :class="{'active': material_name == index && zIndex == k}" v-for="(v, k) in item" @click="materialView(index, k)">
                        <span>
                            <i :class="{'el-icon-picture-outline': index == 'image', 'el-icon-video-camera': index == 'video', 'el-icon-folder': index == 'other'}"></i>
                            {{v.name}}
                        </span>
                        <el-popover placement="bottom" width="240" v-model="DTotal[index][k].delBtnVisible" v-if="k != 0">
                            <p>是否删除该分组？</p>
                            <p style="font-size: 10px; color:#999; padding: 3px 0 10px;">(该分组下所有素材都会被删除！)</p>
                            <div style="text-align: right; margin: 0">
                                <el-button type="text" size="mini" @click="DTotal[index][k].delBtnVisible = false">不用了</el-button>
                                <el-button type="primary" size="mini" @click="delClassify(index, k)">确定</el-button>
                            </div>
                            <b slot="reference" class="icon el-icon-delete" @click.stop></b>
                        </el-popover>
                    </div>
                    <div class="li" v-show="setClassify.show && setClassify.type == index">
                        <el-input :ref="'add_' + index" style="width:120px;" size="mini" v-model="setClassify.val" @blur="setClassify.show = false" @change="submitClassify"></el-input>
                    </div>
                </div>
            </div>
        </div>
        <div class="right_cont">
            <div class="nav">
                <div class="name">{{content_state == 0 ? '素材库' : content_state == 1 ? '上传控件' : '移动控件'}}</div>
                <div class="search"></div>
            </div>
            <div class="content box_border" v-loading="control_loading" element-loading-background="rgba(70, 70, 70, 0.4)">
                <!-- 素材管理 -->
                <div v-if="content_state == 0">
                    <div class="menu title">
                        <div class="bar icon" @click="submitMaterial">
                            <el-tooltip class="item" effect="dark" content="请先选择要添加的素材" placement="top-start" :disabled="active.length > 0">
                                <span :class="{'disabled': active.length <= 0}"><i class="el-icon-check"></i> 确定</span>
                            </el-tooltip>
                        </div>
                        <div class="bar icon" @click="initMoveControl"><i class="el-icon-rank"></i> 移动到</div>
                        <div class="bar icon" @click="previewMaterial">
                            <el-tooltip class="item" effect="dark" content="请先选择要查看的素材" placement="top-start" :disabled="active.length > 0">
                                <span :class="{'disabled': active.length <= 0}"><i class="el-icon-tickets"></i> 查看详情</span>
                            </el-tooltip>
                        </div>
                        <!-- <div class="bar icon"><i class="el-icon-download"></i> 下载</div> -->
                        <div class="bar icon" @click="delMaterial"><i class="el-icon-delete"></i> 删除</div>
                    </div>
                    <div class="cont">
                        <div class="box" :class="{'active': active.indexOf(k) != -1}" v-for="(v, k) in DTotal[material_name][zIndex].file" @click="selectMaterial(k)">
                            <el-image :src="material_name == 'image' ? v.url : material_name == 'video' ? './images/video_icon.png' : './images/other_icon.png'" fit="contain" lazy>
                                <div slot="error" class="image-slot">
                                    <i class="el-icon-picture-outline"></i>
                                </div>
                            </el-image>
                            <p class="ellipsis">{{v.filename}}</p>
                        </div>
                        <div class="tip_noData" v-show="DTotal[material_name][zIndex].file.length <= 0">还没有添加素材呢~</div>
                    </div>
                </div>
                <!-- 移动控件 -->
                <div class="move_control" v-else-if="content_state == 2">
                    <div class="menu title">
                        <div class="bar icon" @click="content_state = 0"><i class="el-icon-arrow-left"></i> 返回</div>
                    </div>
                    <el-transfer v-model="moveControl.value" :titles="[moveControl.data[zIndex].filename, moveControl.data[moveControl.active].filename]" :data="moveControl.data[zIndex].list">
                        <el-select class="transfer-footer" v-model="moveControl.active" slot="right-footer">
                            <el-option v-for="(item, k) in moveControl.data" :label="item.name" :value="k" :disabled="zIndex == k"></el-option>
                        </el-select>
                    </el-transfer>
                    <el-button type="primary" style="width:150px; margin-top:55px;" round @click="saveMoveSet" :disabled="moveControl.value.length <= 0">保存</el-button>
                </div>
                <!-- 上传控件 -->
                <div class="control_cont" v-else>
                    <el-form :model="upload_data">
                        <el-form-item label="上传类型：">
                            <el-radio-group v-model="control_type" size="small">
                                <el-radio-button label="img">图片上传</el-radio-button>
                                <el-radio-button label="video">视频上传</el-radio-button>
                                <el-radio-button label="other">其它文件上传</el-radio-button>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="文件上传：">
                            <el-upload class="upload-demo" action="/" name="file" :show-file-list="false" :on-error="uploadError" :on-success="uploadSuccess" :on-progress="uploadProgress" @submit="USubmit">
                                <el-button size="small" type="primary">{{upload_pro || upload_data ? '重新上传' : '点击上传'}}</el-button>
                                <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
                            </el-upload>
                        </el-form-item>
                        <transition name="el-fade-in-linear">
                            <div class="upload_pro" v-show="upload_pro">
                                <el-progress :percentage="upload_pro.percent" :stroke-width="20" :format="format"></el-progress>
                                <p>{{upload_pro.now}} / {{upload_pro.total}}</p>
                            </div>
                        </transition>
                        <transition name="el-zoom-in-top">
                            <div v-show="upload_data">
                                <el-form-item label="文件名称：">
                                    <el-input class="inp" v-model="upload_data.name" placeholder="上传文件的名称"></el-input>
                                </el-form-item>
                                <el-form-item label="文件类型：">{{upload_data.type}}</el-form-item>
                                <el-form-item label="文件大小：">{{upload_data.size}}</el-form-item>
                                <el-button style="display: block; width:150px; margin: 0 auto;" type="primary" @click="submitSelect">确认</el-button>
                            </div>
                        </transition>
                    </el-form>
                </div>
            </div>
        </div>
        <!-- 查看详情-弹窗 -->
        <el-dialog title="素材详情" :visible.sync="defaultView" width="750px" :append-to-body="true" :modal-append-to-body="false" @closed="defaultActive = []">
            <el-table :data="defaultActive">
                <el-table-column prop="url" label="素材" width="100">
                    <template slot-scope="item">
                        <el-image :src="material_name == 'image' ? item.row.url : material_name == 'video' ? './images/video_icon.png' : './images/other_icon.png'" fit="cover" style="width:80px;">
                            <div slot="error" class="image-slot">
                                <i class="el-icon-picture-outline"></i>
                            </div>
                        </el-image>
                    </template>
                </el-table-column>
                <el-table-column prop="filename" label="名称" width="150"></el-table-column>
                <el-table-column prop="extension" label="格式"></el-table-column>
                <el-table-column prop="size" label="大小" width="120">
                    <template slot-scope="item">{{item.row.size}}</template>
                </el-table-column>
                <el-table-column prop="create_time" label="上传时间" width="120"></el-table-column>
                <el-table-column label="操作" width="120">
                    <template slot-scope="item">
                        <el-button type="primary" icon="el-icon-search" size="mini" @click="window.open(item.row.url)">预览</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>
    </div>

<script src="js/vue.min.js"></script>
<script src="js/element_ui.min.js"></script>
<script>
    var material_library = new Vue({
        el: '#upoload_content',
        data(){
            return {
                content_state: 1,       //当前内容 (0：素材管理, 1：上传控件, 2: 移动控件)
                control_type: 'img',    //控件类型
                material_name: 'image', //内容类型 (仅 content_state 为 0 时有效)
                zIndex: -1,              //当前内容分类 (仅 content_state 为 0 时有效
                control_loading: false,
                defaultView: false,
                DTotal: {   //素材库
                    image: [
                        { 
                            name: '未分组',
                            file: [
                                { url: 'http://cache.weikuw.com/uploads/images/banner_1.jpg', filename: '加拿大马蹄湾', extension: 'jpg', size: '1024785', create_time: '2020-9-29'},
                                { url: 'http://cache.weikuw.com/uploads/images/banner_2.jpg', filename: '加拿大马蹄湾', extension: 'jpg', size: '1024785', create_time: '2020-9-29'},
                                { url: 'http://cache.weikuw.com/uploads/images/banner_3.jpg', filename: '加拿大马蹄湾', extension: 'jpg', size: '1024785', create_time: '2020-9-29'},
                                { url: 'http://cache.weikuw.com/uploads/images/banner_4.jpg', filename: '加拿大马蹄湾', extension: 'jpg', size: '1024785', create_time: '2020-9-29'},
                                { url: 'http://cache.weikuw.com/uploads/images/banner_4.png', filename: '加拿大马蹄湾', extension: 'jpg', size: '1024785', create_time: '2020-9-29'},
                                { url: 'http://cache.weikuw.com/uploads/images/pro_1.jpg', filename: '中国风纸雕灯', extension: 'jpg', size: '1024785', create_time: '2020-9-29'},
                                { url: 'http://cache.weikuw.com/uploads/images/pro_2.jpg', filename: '中国风纸雕灯', extension: 'jpg', size: '1024785', create_time: '2020-9-29'},
                                { url: 'http://cache.weikuw.com/uploads/images/pro_3.jpg', filename: '中国风纸雕灯', extension: 'jpg', size: '1024785', create_time: '2020-9-29'}
                            ]
                        },
                        {
                            name: 'banner',
                            file: []
                        },
                    ],
                    video: [
                        {
                            name: '未分组',
                            file: [
                                { url: 'http://cache.weikuw.com/uploads/video/TheWinterSolstice.mp4', filename: '春节', extension: 'mp4', size: '1024785', create_time: '2020-9-29'}
                            ]
                        }
                    ],
                    other: [
                        {
                            name: '未分组',
                            file: [
                                { url: 'http://cache.weikuw.com/uploads/CSC.docx', filename: '定制需求文档', extension: 'docx', size: '1024785', create_time: '2020-9-29'}
                            ]
                        }
                    ]
                },
                setClassify: {
                    show: false,
                    type: 'image',
                    val: ''
                },
                moveControl: {
                    data: [],   //可移动的数据
                    value: [],  //移动过的值
                    active: 0   //当前类
                },
                active: [],     //当前选择的素材组
                defaultActive: [],
                upload_data: { name: 'xxx', type: 'image/jpeg', size: '404.5KB'},   //上传素材数据    (未上传: false, 已上传: { name: xxx, type: 'image/jpeg', size: '404.5KB'})
                upload_pro: false,    //上传进度数据    (关闭: false, 开启: { percent: 1, total: 414125, now: 64525})
            }
        },
        created(){
            var _this = this,
                data = [];
            console.log('Material Library Start:', this);

            // this.initMoveControl();
        },
        methods: {
            //素材上传
            submitSelect(){},
            uploadSuccess(res, files, fileList){
                console.log('upload suc:', res, files);
                let file = files[0].raw;
                this.upload_pro = false;
                this.upload_data = {
                    name: file.name,
                    size: (file.size / 1024).toFixed(1) + 'KB',
                    type: file.type
                };
            },
            uploadError(err, files, fileList){
                console.log('upload err:', err, files);
                this.upload_pro = false;
                this.$alert(err, '系统错误');
            },
            uploadProgress(res, file, fileList){
                console.log('upload pro:', res, file);
                this.upload_pro = {
                    percent: res.percent,
                    now: res.loaded,
                    total: res.total
                };
            },
            format(per){
                return per == 100 ? '' : `${per}%`;
            },
            //分类设置
            addClassify(type){
                // console.log('add:', type);
                this.setClassify.type = type;
                this.setClassify.show = true;
                this.setClassify.val = '';
                this.$nextTick(function(){
                    this.$refs['add_' + type][0].$refs.input.focus();
                });
            },
            submitClassify(val){
                console.log('sub:', val);
                this.DTotal[this.setClassify.type].push({
                    name: val,
                    file: [],
                    delBtnVisible: false
                });
                this.setClassify.show = false;
            },
            delClassify(type, key){
                // console.log('del:', type, key);
                if(key <= this.zIndex) --this.zIndex;
                this.DTotal[type].splice(key, 1);
            },
            //素材管理
            materialView(type, key){
                // console.log('view:', type, key);
                this.content_state = 0;
                this.material_name = type;
                this.active = [];
                this.zIndex = key;
            },
            selectMaterial(idx){
                let i = this.active.indexOf(idx);
                if(i == -1){
                    this.active.push(idx);
                } else{
                    this.active.splice(i, 1);
                }
            },
            delMaterial(){
                let _this = this,
                    active = this.active;
                this.$confirm('确定要删除这' + this.active.length + '份素材吗？', '温馨提示').then(function(){
                    for(var i in active){
                        _this.DTotal[_this.material_name][_this.zIndex].file.splice(active[i], 1);
                    }
                    _this.active = [];
                });
            },
            previewMaterial(){
                if(this.active.length <= 0) return false;
                var _this = this;
                for(var i in this.active){
                    _this.defaultActive.push(_this.DTotal[_this.material_name][_this.zIndex].file[_this.active[i]]);
                }
                this.defaultView = true;
            },
            //选择素材(确认)
            submitMaterial(){
                if(this.active.length <= 0) return false;
                let list = [];
                for(var i in this.active){
                    list.push(this.DTotal[this.material_name][this.zIndex].file[this.active[i]]);
                }
                console.log('list:', list);
            },
            //移动控件
            initMoveControl(){
                const data = [];
                let list = this.DTotal[this.material_name],
                    // value = {},
                    active = this.zIndex == data.length - 1 ? 0 : (this.zIndex + 1);
                for(var i in list){
                    let item = list[i];
                    data[i] = {
                        name: item.name,
                        list: []
                    };
                    for(var k in item.file){
                        let v = item.file[k];
                        data[i].list.push({
                            key: k,
                            label: v.filename
                        })
                    }
                    // value[i] = [];
                }
                this.moveControl.data = data;
                this.moveControl.active = active;
                this.content_state = 2;
            },
            saveMoveSet(){
                var _this = this,
                    list = this.DTotal[this.material_name],
                    item = list[_this.moveControl.active];
                this.control_loading = true;
                for(var i in this.moveControl.value){
                    let idx = this.moveControl.value[i];
                    item.file = item.file.concat(list[_this.zIndex].file.splice(idx, 1));
                }
                this.moveControl.value = [];
                // console.log('move DTotal:', list);

                //保存成功后返回素材管理界面
                this.control_loading = false;
                this.content_state = 0;
            }
        },
    });
    window.material_library = material_library;
</script>
</body>
</html>